<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <style>
        body,div,i{
            -webkit-tap-highlight-color:rgba(0,0,0,0);
        }
        body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #f3f5f4;
        }
        .link{
            width: 60%;
            margin: 0 auto;
            margin-top: 75px;
        }
        .link .linkBtn:last-child{
            margin-top: 25px;
        }
        .link .linkBtn{
            height: 42px;
            border: 1px solid #000;
            border-radius: 50px;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;;
        }
        .link .linkBtn i{
            display: inline-block;
            float: left;
        }
        .link .linkBtn .icon-iphone{
            width: 20px;
            height: 25px;
            margin-left: 35px;
            margin-top: 9px;
            background: url("images/icon-iphone.png") no-repeat;
            background-size: 100%;
        }
        .link .linkBtn .icon-android{
            width: 25px;
            height: 24px;
            margin-left: 31px;
            margin-top: 9px;
            background: url("images/icon-android.png") no-repeat;
            background-size: 100%;
        }
        .link .linkBtn .icon-font-iphone{
            width: 97px;
            height: 18px;
            margin-top: 14px;
            margin-left: 18px;
            background: url("images/font-iphone.png") no-repeat;
            background-size: 100%;;
        }
        .link .linkBtn .icon-font-android{
            width: 101px;
            height: 14px;
            margin-top: 14px;
            margin-left: 12px;
            background: url("images/font-android.png") no-repeat;
            background-size: 100%;;
        }
        .mask{
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            background-color: #000;
            filter:alpha(opacity=70);
            -moz-opacity:0.7;
            opacity:0.7;
            z-index: 1;
        }
        .shareFre{
            position: absolute;
            top: 28%;
            left: 50%;
            margin-left: -56px;
            color: #fff;
            text-align: center;
            z-index: 10;
        }
        .arrow{
            position: absolute;
            right: 25px;
            top: 20px;
            z-index: 10;
        }
        #JweixinTip{
            display: none;
        }
        /* 判断iphone4-iphone4s */
        @media screen and (device-aspect-ratio: 2/3) {
            .link{
                margin-top: 40px;
            }
        }
        /* 判断iphone6 */
        @media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
            .link{
                margin-top: 75px;
            }
        }
        /* 判断iphone6plus */
        @media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
            .link{
                margin-top: 105px;
            }
        }
    </style>
</head>
<body>
<section>
    <div class="banner"><img src="images/banner.png" width="100%"></div>
    <div class="link">
        <div class="linkBtn" id="weixiniPhone" onclick="window.location.href='https://itunes.apple.com/cn/app/id1126238411'">
            <i class="icon icon-iphone"></i>
            <i class="icon icon-font-iphone"></i>
        </div>
        <div class="linkBtn" id="weixinAndroid">
            <i class="icon icon-android"></i>
            <i class="icon icon-font-android"></i>
        </div>
    </div>
</section>
<div id="JweixinTip">
    <div class="mask"></div>
    <div class="shareFre">点击右上角<br>在浏览器中打开</div>
    <div class="arrow"><img src="images/arrow.png"/></div>
</div>

<script src="js/jquery-1.11.3.js"></script>
<script>
    var ua = navigator.userAgent;
    var isWeixin =  !!/MicroMessenger/i.test(ua);
    function weixinTip(ele){
        var ua = navigator.userAgent;
        var isWeixin = !!/MicroMessenger/i.test(ua);
        if(isWeixin){
            ele.onclick=function(e){
                window.event? window.event.returnValue = false : e.preventDefault();
                document.getElementById('JweixinTip').style.display='block';
            };
            document.getElementById('JweixinTip').onclick=function(){
                this.style.display='none';
            }
        }
    }
    var iphone = document.getElementById('weixiniPhone');
    weixinTip(iphone);
    var android = document.getElementById('weixinAndroid');
    weixinTip(android);

    /*$(".mask").on("touchstart",function(){
        $(".shareFre").hide();
        $(".arrow").hide();
        $(".mask").hide();
    });*/
</script>
</body>
</html>